<!-- 订单一项 -->
<template>
	<view class="listItem" @click="enterOrderDetails" :style="{margin: margin}">

		<view class="left">
			<image class="image" :src="pageData.headImg" mode="aspectFill"></image>
		</view>

		<view class="right">
			<view class="right-top">
				<text class="name">{{pageData.name}}</text>

				<!-- 因为评分暂时没有，所以先注释，以后有了再恢复 -->
				<!-- <view class="grade">
					<image class="grade-image" src="/static/images/Frame.png" mode="aspectFill"></image>
					<text class="grade-text">评分暂无</text>
				</view> -->

			</view>

			<view class="right-center">
				<text>预约时间：</text>
				<text>{{pageData.startTime + '~'}}</text>
				<text>{{pageData.endTime | endTimeShow}}</text>
			</view>

			<view class="right-bottomBox">
				<view class="box-item">
					<text class="box-item-title">称呼</text>
					<text class="box-item-text">{{pageData.userName}}</text>
				</view>
				<view class="box-item">
					<text class="box-item-title">时长</text>
					<text class="box-item-text">{{pageData.duration + pageData.unit}}</text>
				</view>
				<view class="box-item">
					<text class="box-item-title">项目</text>
					<text class="box-item-text">{{pageData.categoryName}}</text>
				</view>
				<view class="box-item">
					<text class="box-item-title">金额</text>
					<text class="box-item-text">￥{{pageData.money}}</text>
				</view>
			</view>

			<view class="right-buttons" v-if="pageData.status === 1 || pageData.status === 2 || pageData.status === 7">
				<view :class="{
					box1:true,
					box2: false
				}" v-if="pageData.status === 1" @click.stop="refund">
					退款
				</view>
				
				<view :class="{
					box1:true,
					box2: true
				}" v-if="pageData.status === 1" @click.stop="takeOrders(1)">
					开始服务
				</view>
				
				<view :class="{
					box1:true,
					box2: true
				}" v-if="pageData.status === 2" @click.stop="takeOrders(2)">
					结束服务
				</view>
				
				<view :class="{
					box1:true,
					box2: true
				}" v-if="pageData.status === 7" @click.stop="takeOrders(3)">
					接单
				</view>

			</view>

		</view>

		<view class="position">{{pageData.status | statusInit}}</view>

	</view>
</template>

<script>
	//请求api
	import {
		getOrderRefundApi, // 退款
		postOrderStatusUpdateApi, // 变更状态
	} from '@/api/artistCentre.js'
	
	import {
		mapState,
		mapGetters,
		mapMutations,
		mapActions
	} from 'vuex'

	export default {
		props: {
			data: {
				type: Object,
				default: () => {}
			},
			//刷新页面
			init:{
				type: Function,
				default: () => {}
			},
			
			margin:{
				type:String,
				default: "0 0 24rpx 0"
			}
		},
		data() {
			return {
				pageData: {}, // 页面数据
			};
		},
		created() {
			this.setPageDataInit(this.data)
			
		},
		methods: {
			...mapMutations('home', ['setOrderItemData']),
			
			
			/**
			 * 进入订单详情
			 */
			enterOrderDetails(val) {
				this.setOrderItemData(this.data)
				uni.navigateTo({
					url: '/pages/artist/artistCentre/orderManage/OrderDetails/index'
				});
			},


			/**
			 * 格式化页面数据
			 */
			setPageDataInit(val) {
				this.pageData = {
					headImg: val.coverUrl, // 头像
					name: val.stageName, // 艺人名字
					status: val.status, // 服务状态
					// time: val.subscribeStartTime
					startTime: val.subscribeStartTime, // 预约开始时间
					endTime: val.subscribeEndTime, // 预约结束时间

					userName: val.salutation, // 称呼
					duration: val.duration, // 预约时长
					unit: val.unit, // 预约的单位
					categoryName: val.categoryName, // 服务的项目
					money: val.payAmount, // 支付金额

					orderNo: val.orderNo, // 订单号
					data: val
				}

			},

			/**
			 * 变更状态
			 */
			async takeOrders(val) {
				const res = await postOrderStatusUpdateApi({
					operation:val, // 操作： 1 开始服务 2 结束服务 3 接单
					orderNo: this.pageData.orderNo, // 订单号
				})
				if (res.code !== 200) {
					uni.showToast({
						duration: 3000,
						title: '操作失败请重试',
						icon: 'none'
					})
					return
				}
				uni.showToast({
					duration: 3000,
					title: '操作成功',
					icon: 'none'
				})
				this.$emit('init')
				
			},

			/**
			 * 退款
			 */
			async refund() {
				const res = await getOrderRefundApi(this.pageData.orderNo);

				if (res.code !== 200) {
					uni.showToast({
						duration: 3000,
						title: '退款失败请重试',
						icon: 'none'
					})
					return
				}
				uni.showToast({
					duration: 3000,
					title: '退款成功',
					icon: 'none'
				})
				
				this.$emit('init')
			}
		},
		filters: {
			/**
			 * 状态展现文字
			 */
			statusInit(val) {
				let str = ''
				switch (val) {
					case 0:
						str = '待付款';
						break;
					case 1:
						str = '待服务';
						break
					case 2:
						str = '进行中'
						break;
					case 3:
						str = '已完成'
						break;
					case 4:
						str = '已退款'
						break;
					case 5:
						str = '已取消'
						break;
					case 6:
						str = '已评价'
						break;
					case 7:
						str = '待接单'
						break;
				}
				return str;
			},
			
			/**
			 * 结束时间分割
			 */
			endTimeShow(val){
				return val ? val.split(" ")[1] : val
			}
		},

		watch: {
			data: {
				handler(val) {
					this.setPageDataInit(this.data)
				},
				deep: true
			}
		}
	}
</script>

<style lang="less" scoped>
	.listItem {
		#flex(-, space-between, flex-start);
		#padding(16rpx 24rpx);
		#box(100%, auto, 16rpx, #fff);
		box-shadow: 0px 0px 8px 3px rgba(210, 211, 213, 0.5);
		position: relative;

		.left {
			margin-right: 24rpx;

			.image {
				#box(120rpx, 120rpx, 50%, rgba(#000, .1));
			}
		}

		.right {
			flex: 1;

			.right-top {
				#flex(-, start, center);

				.name {
					#font(36rpx, #0f0d21, black);
				}

				.grade {
					#flex(-, start, center);

					.grade-image {
						#box(32rpx);
						margin: 0 8rpx 0 24rpx;
					}

					.grade-text {
						#font(22rpx, #0f0D21, black);
					}
				}
			}

			.right-center {
				#font(24rpx, #8c8a8a);
				margin: 16rpx 0;
			}

			.right-bottomBox {
				#flex(-, start, center);
				#box(100%, auto, 10rpx, rgba(#8C8A8A, .2));
				#padding(12rpx 0);

				.box-item {
					#box(100%/4, auto);
					#flex(column, center, center);

					&:not(:last-child) {
						border-right: 2rpx solid rgba(#000, .1);
					}

					.box-item-title {
						#font(20rpx, #8c8a8a);
						margin-bottom: 16rpx;
					}

					.box-item-text {
						#font(24rpx, #0f0d21);
						line-height: 36rpx;
						text-align: center;
					}

				}
			}


			.right-buttons {
				#flex(-, flex-end, center);
				margin-top: 12rpx;

				.box1 {
					#padding(14rpx 24rpx);
					#font(24rpx, #0f0d21);

					border: 2rpx solid rgba(0, 0, 0, 0.1);
					border-radius: 100rpx;
					margin-left: 16rpx;
				}

				.box2 {
					background: linear-gradient(180deg, #E27C8A -3%, #EC606F 100%);
					color: #fff;
					border: none;
				}
			}
		}

		.position {
			position: absolute;
			right: 24rpx;
			top: 24rpx;

			#font(28rpx, #ec606f);
		}
	}
</style>